<template>
	<div class="login-container">
		<div class="login-box">
			<Form ref="formInline" class="login-form" :model="formInline" :rules="ruleInline">
				<FormItem prop="user" style="margin-bottom:20px">
					<Input type="text" v-model="formInline.user" placeholder="Username">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password" style="margin-bottom:20px">
					<Input type="password" v-model="formInline.password" password placeholder="Password">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					<span slot="append">
						<Icon type="ios-eye-outline" :style="{cursor: 'pointer'}" /></span>
					</Input>
				</FormItem>
				<FormItem>
					<Button type="primary" long @click="handleSubmit('formInline')">登录</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
	import common from "../../utils/common.js"
	export default {
		components: {},
		data: () => ({
			formInline: {
				user: '',
				password: ''
			},
			ruleInline: {
				user: [{
					required: true,
					message: '请填写用户名',
					trigger: 'blur'
				}],
				password: [{
						required: true,
						message: '请填写用户名密码',
						trigger: 'blur'
					},
					{
						type: 'string',
						min: 6,
						message: '密码最少6位',
						trigger: 'blur'
					}
				]
			}
		}),
		methods: {
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$store.dispatch('login', this.formInline).then(res => {
							if (res)
								this.$store.dispatch('getUserInfo').then(res => {
									if (res)
									this.$router.push(common.home_url)
								})
						})
					} else {
						this.$Message.error('校验失败,请重新填写');
					}
				})
			}
		},
		computed: {},
		watch: {},
		created() {
			console.log(this.$store.getters.isAuthenticated)
			if(this.$store.getters.isAuthenticated){
				this.$store.dispatch('getUserInfo').then(res => {
					if (res)
					this.$router.push(common.home_url)
				})
			}
		},
		beforeMount() {},
		mounted() {},
		updated() {},
		beforeDestroy() {

		},
		destroyed() {

		}
	};
</script>

<style>
	.login-container {
		height: 100vh;
		background: url(../../assets/login-bg.jpg) no-repeat;
	}

	.login-box {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 900px;
		height: 450px;
		background: url(../../assets/login.png) no-repeat;
	}

	.login-box::before {
		background: url(../../assets/logo-login.png) no-repeat;
		content: '';
		width: 340px;
		height: 50px;
		position: absolute;
		top: 10%;
		transform: translate(-50%, -50%);
		left: 50%;
	}

	.login-form {
		width: 320px;
		margin: 90px auto 0;
	}
</style>
